<template>
	<view>
		<u-navbar title="邀请好友" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<!-- <view class="" style="position: absolute;top:100px;width: 100%;display: flex;justify-content: center;">
			<u--image :showLoading="true" :src="src2" width="150px" height="140px"></u--image>
		</view> -->

		<view style="display: flex;justify-content: space-around;padding-top: 340rpx;">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="link"
				:options="{ margin: 10 ,foregroundImageSrc:'/static/hongming.png'}"></uqrcode>
		</view>
		<view class="" style="display: flex;align-items: center;flex-direction: column;">
			<view class="button" @tap="saveImg();">
				保存二维码
			</view>
			<view class="button" @tap="copyLink();">
				复制分享链接
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	export default {
		data() {
			return {
				src1: '/static/img/user/invate_introduce.png',
				src2: '/static/img/user/invate_logo.png',
				bgColor: '#8feae9',
				link: ''
			}
		},
		onLoad() {

			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			// console.log(this.userInfo)

			this.link = 'http://shops.hnliandesy.com/shop_h5/#/pages/login/register?tusernumber=' + this.userInfo
				.usernumber;

		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},

		methods: {
			saveImg() {
				// uqrcode为组件的ref名称
				this.$refs.uqrcode.save({
					success: () => {
						this.$api.msg('保存成功！');
					}
				});
			},

			copyLink() {
				uni.setClipboardData({
					data: this.link, //要被复制的内容
					success: () => { //复制成功的回调函数
						this.$api.msg('复制成功！');
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-image: url('@/static/img/user/invate_bg.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>
<style lang="scss" scoped>
	.button {
		width: 180px;
		line-height: 40px;
		height: 40px;
		background-color: #29ad97;
		color: #fff;
		display: flex;
		justify-content: center;
		border-radius: 40px;
		margin-top: 20px;
		letter-spacing: 4upx;
		font-size: 14px;
	}
</style>